<template>
  <div>
    <div class="mingxi">
      <span>{{ title }}</span>
      <i class="el-icon-plus" size="mini" @click="addYimiao"></i>
    </div>
    <el-table :data="tableData" border size="mini">
      <el-table-column label="疫苗名称">
        <template slot-scope="{ row }">
          <el-select
            v-model="row.yimiao"
            placeholder="请选择疫苗"
            size="mini"
            
          >
            <el-option
              v-for="(item, index) in yimiaoList"
              :key="index"
              :value="item.label"
              :label="item.label"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="头均用量">
        <template slot-scope="{ row }">
          <el-input
            type="text"
            v-model="row.number"
            size="mini"
            placeholder="请输入数量"
            maxlength="10"
            show-word-limit
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="单位">
        <template slot-scope="{ row }">
          <el-select v-model="row.value" size="mini">
            <el-option
              v-for="(item, index) in unitOfMeasure"
              :key="index"
              :value="item.label"
              :label="item.label"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="用药方式">
        <template slot-scope="{ row }">
          <el-select v-model="row.pay" size="mini">
            <el-option
              v-for="(item, index) in pay"
              :key="index"
              :value="item.label"
              :label="item.label"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column width="40">
        <template slot-scope="{ row,$index }">
          <i class="el-icon-close del" @click="deleteData($index)"></i>
        </template>
        
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { yimiaoList, unitOfMeasure, pay } from "../constant/index";
export default {
  name: "DialogTbale",
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      require: true,
      default: () => "表格title",
    },
  },
  data() {
    return {
      yimiaoList,
      unitOfMeasure,
      pay,
      item: [
        {
          yimiao: "",
          value: "KG",
          number: "",
          pay: "肌注",
        },
      ],
    };
  },
  methods: {
    addYimiao() {
      this.tableData.push({
        yimiao: "",
        value: "KG",
        number: "",
        pay: "肌注",
      });
    },
    deleteData(index) {
      console.log(index)
      this.$alert("确定要删除？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showCancelButton: true,
      })
        .then( () => {
          this.tableData.splice(index,1)
        })
        .catch(() => {});
    }
  },
};
</script>

<style lang="scss" scoped>
.mingxi {
  display: flex;
  justify-content: space-between;
  i {
    background: #52a5ff;
    color: #fff;
    cursor: pointer;
  }
}
.del{
  border-radius: 50%;
  color: #fff;
  background-color: #D2D4D8;
  cursor: pointer;
}
</style>
